import React, { Component } from 'react'
import Taro from '@tarojs/taro'
import { AtButton } from 'taro-ui'
import { View, Swiper, SwiperItem, Image, Text } from '@tarojs/components'
import { addCarts } from '../../utils/common'

import './index.scss'


export default class Index extends Component {
  toDetail = (goods_id) => {
    Taro.navigateTo({ url: `/pages/goods_detail/index?goods_id=${goods_id}`});
  };

  addCarts = (goods) => addCarts({
    goods_id: goods.goods_id,
    goods_model: goods.parameter.goods_model[0],
    goods_style: goods.parameter.goods_style[0],
    goods_number: 1,
    goods_state: 1
  });

  render() {
    const { goods_id, pictures, name, price } = this.props;

    return <View className='flow-box'>
      <Swiper
        indicatorColor='#999'
        indicatorActiveColor='#333'
        circular
        indicatorDots
        onClick={() => this.toDetail(goods_id)}
      >
        {pictures&&pictures.map( (item, index) => <SwiperItem key={index}>
          <Image className='flow-image' src={item} />
        </SwiperItem>)}
      </Swiper>
      <View className='flow-content'>
        <View className='flow-name'>{name}</View>
        <View className='flow-price'>
          <View style='line-height: 40px;'>￥{price}</View>
          <View className='flow-buy'>
            <AtButton type='primary' size='small' circle onClick={() => this.addCarts(this.props)} >
              <Text>
                加入购物车
              </Text>
            </AtButton>
          </View>
        </View>
      </View>
    </View>
  }
}
